<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>生死数据统计</a-breadcrumb-item>
      <a-breadcrumb-item>地区死亡对比</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">地区死亡对比</div>
        <div class="header-subtitle">阴曹地府 · 地域数据分析</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card highest-stat">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">死亡率最高</div>
              <div class="stat-value">{{ highestRegion }}</div>
              <div class="stat-label">{{ highestRate }}‰</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card lowest-stat">
            <div class="stat-icon">
              <SmileOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">死亡率最低</div>
              <div class="stat-value">{{ lowestRegion }}</div>
              <div class="stat-label">{{ lowestRate }}‰</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card variation-stat">
            <div class="stat-icon">
              <BarChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">地区差异度</div>
              <div class="stat-value">{{ variationCoeff }}</div>
              <div class="stat-label">变异系数</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card urbanrural-stat">
            <div class="stat-icon">
              <EnvironmentOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">城乡差异</div>
              <div class="stat-value">{{ urbanRuralGap }}</div>
              <div class="stat-label">‰ 差值</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 地区死亡率地图 -->
        <a-col :xs="24">
          <a-card title="全国死亡率分布地图" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="mapDataType" style="width: 120px">
                  <a-select-option value="death_rate">死亡率</a-select-option>
                  <a-select-option value="death_count">死亡人数</a-select-option>
                  <a-select-option value="avg_age">平均年龄</a-select-option>
                </a-select>
                <a-select v-model:value="mapYear" style="width: 100px">
                  <a-select-option value="2024">2024年</a-select-option>
                  <a-select-option value="2023">2023年</a-select-option>
                </a-select>
              </a-space>
            </template>
            <div class="chart-container">
              <v-chart :option="mapOption" style="height: 500px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区对比柱状图 -->
        <a-col :xs="24" :lg="12">
          <a-card title="地区死亡率对比" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="regionComparisonOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 城乡对比分析 -->
        <a-col :xs="24" :lg="12">
          <a-card title="城乡死亡率对比" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="urbanRuralOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区年龄结构对比 -->
        <a-col :xs="24" :lg="12">
          <a-card title="地区年龄结构对比" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="ageStructureOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区趋势变化 -->
        <a-col :xs="24" :lg="12">
          <a-card title="地区死亡率趋势" :bordered="false" class="chart-card">
            <template #extra>
              <a-range-picker v-model:value="trendDateRange" />
            </template>
            <div class="chart-container">
              <v-chart :option="regionTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区排名表格 -->
        <a-col :xs="24" :lg="16">
          <a-card title="地区死亡率排名" :bordered="false" class="table-card">
            <template #extra>
              <a-space>
                <a-button @click="exportData">
                  <DownloadOutlined />
                  导出数据
                </a-button>
                <a-button @click="refreshData">
                  <ReloadOutlined />
                  刷新
                </a-button>
              </a-space>
            </template>
            <a-table :columns="regionColumns" :data-source="regionTableData" :pagination="{ pageSize: 10 }" size="small" />
          </a-card>
        </a-col>

        <!-- 地区差异分析 -->
        <a-col :xs="24" :lg="8">
          <a-card title="地区差异分析" :bordered="false" class="analysis-card">
            <div class="analysis-content">
              <div class="analysis-section">
                <h4>主要差异因素</h4>
                <div class="factor-list">
                  <div class="factor-item">
                    <span class="factor-name">经济发展水平</span>
                    <div class="factor-bar">
                      <div class="factor-progress" style="width: 85%"></div>
                    </div>
                    <span class="factor-value">85%</span>
                  </div>
                  <div class="factor-item">
                    <span class="factor-name">医疗资源配置</span>
                    <div class="factor-bar">
                      <div class="factor-progress" style="width: 78%"></div>
                    </div>
                    <span class="factor-value">78%</span>
                  </div>
                  <div class="factor-item">
                    <span class="factor-name">环境质量</span>
                    <div class="factor-bar">
                      <div class="factor-progress" style="width: 72%"></div>
                    </div>
                    <span class="factor-value">72%</span>
                  </div>
                  <div class="factor-item">
                    <span class="factor-name">人口结构</span>
                    <div class="factor-bar">
                      <div class="factor-progress" style="width: 65%"></div>
                    </div>
                    <span class="factor-value">65%</span>
                  </div>
                </div>
              </div>

              <div class="analysis-section">
                <h4>改善建议</h4>
                <ul class="suggestion-list">
                  <li>加大对欠发达地区医疗投入</li>
                  <li>完善基层医疗服务体系</li>
                  <li>推进医疗资源均等化</li>
                  <li>强化环境治理和保护</li>
                  <li>优化人口政策配置</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { TrophyOutlined, SmileOutlined, BarChartOutlined, EnvironmentOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, VisualMapComponent } from 'echarts/components'

// 注册 ECharts 组件
use([CanvasRenderer, BarChart, LineChart, RadarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, VisualMapComponent])

// 响应式数据
const loading = ref(false)
const mapDataType = ref('death_rate')
const mapYear = ref('2024')
// 修复日期选择器格式
const trendDateRange = ref([dayjs('2024-01-01'), dayjs('2024-12-31')])

// 核心指标数据
const highestRegion = ref('华北地区')
const highestRate = ref('9.8')
const lowestRegion = ref('华南地区')
const lowestRate = ref('6.2')
const variationCoeff = ref('0.15')
const urbanRuralGap = ref('2.3')

// 地图数据
const generateMapData = () => {
  const regions = [
    { name: '北京', value: 7.2 },
    { name: '天津', value: 8.1 },
    { name: '河北', value: 9.8 },
    { name: '山西', value: 9.5 },
    { name: '内蒙古', value: 8.9 },
    { name: '辽宁', value: 9.2 },
    { name: '吉林', value: 9.0 },
    { name: '黑龙江', value: 9.6 },
    { name: '上海', value: 6.8 },
    { name: '江苏', value: 7.5 },
    { name: '浙江', value: 7.1 },
    { name: '安徽', value: 8.3 },
    { name: '福建', value: 6.9 },
    { name: '江西', value: 7.8 },
    { name: '山东', value: 8.4 },
    { name: '河南', value: 8.7 },
    { name: '湖北', value: 8.2 },
    { name: '湖南', value: 7.9 },
    { name: '广东', value: 6.2 },
    { name: '广西', value: 7.4 },
    { name: '海南', value: 6.5 },
    { name: '重庆', value: 7.7 },
    { name: '四川', value: 8.0 },
    { name: '贵州', value: 8.5 },
    { name: '云南', value: 8.1 },
    { name: '西藏', value: 7.6 },
    { name: '陕西', value: 8.2 },
    { name: '甘肃', value: 8.8 },
    { name: '青海', value: 8.4 },
    { name: '宁夏', value: 8.6 },
    { name: '新疆', value: 8.3 }
  ]
  return regions
}

// 修改地图配置为柱状图，避免中国地图GeoJSON问题
const mapOption = computed(() => {
  const data = generateMapData()
  const names = data.map((item) => item.name)
  const values = data.map((item) => item.value)

  return {
    title: {
      text: '全国各省死亡率分布',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: '{b}<br/>死亡率: {c}‰'
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: names,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: {
        color: '#999',
        rotate: 45,
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      name: '死亡率 (‰)',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23.1h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }
    ],
    series: [
      {
        name: '死亡率',
        type: 'bar',
        data: values,
        itemStyle: {
          color: function (params) {
            const value = params.value
            if (value >= 9) return '#ff4d4f'
            if (value >= 8) return '#faad14'
            if (value >= 7) return '#52c41a'
            return '#1890ff'
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 地区对比柱状图
const regionComparisonOption = computed(() => {
  const regions = ['华北', '东北', '华东', '华中', '华南', '西北', '西南']
  const deathRates = [9.1, 9.3, 7.1, 8.1, 6.7, 8.5, 8.0]

  return {
    title: {
      text: '地区死亡率对比',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: '{b}<br/>死亡率: {c}‰'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: regions,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '死亡率 (‰)',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '死亡率',
        type: 'bar',
        data: deathRates,
        itemStyle: {
          color: function (params) {
            const colors = ['#ff7875', '#ff9c6e', '#ffc069', '#fff566', '#95de64', '#5cdbd3', '#85a5ff']
            return colors[params.dataIndex]
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 城乡对比图
const urbanRuralOption = computed(() => {
  const regions = ['华北', '东北', '华东', '华中', '华南', '西北', '西南']
  const urbanRates = [8.2, 8.5, 6.8, 7.6, 6.1, 7.8, 7.5]
  const ruralRates = [10.0, 10.1, 7.4, 8.6, 7.3, 9.2, 8.5]

  return {
    title: {
      text: '城乡死亡率对比',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['城市', '农村'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: regions,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '死亡率 (‰)',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '城市',
        type: 'bar',
        data: urbanRates,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#4facfe' },
              { offset: 1, color: '#00f2fe' }
            ]
          }
        }
      },
      {
        name: '农村',
        type: 'bar',
        data: ruralRates,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#ff9a9e' },
              { offset: 1, color: '#fecfef' }
            ]
          }
        }
      }
    ]
  }
})

// 年龄结构对比雷达图
const ageStructureOption = computed(() => {
  return {
    title: {
      text: '地区年龄结构对比',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['华北', '华东', '华南'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    radar: {
      indicator: [
        { name: '0-20岁', max: 30 },
        { name: '21-40岁', max: 30 },
        { name: '41-60岁', max: 30 },
        { name: '61-80岁', max: 30 },
        { name: '80岁以上', max: 30 }
      ],
      splitArea: {
        areaStyle: {
          color: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)']
        }
      }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [5.2, 12.8, 18.9, 25.1, 22.3],
            name: '华北',
            lineStyle: { color: '#ff7875' },
            areaStyle: { color: 'rgba(255, 120, 117, 0.3)' }
          },
          {
            value: [4.8, 11.5, 16.2, 23.8, 18.9],
            name: '华东',
            lineStyle: { color: '#74b9ff' },
            areaStyle: { color: 'rgba(116, 185, 255, 0.3)' }
          },
          {
            value: [6.1, 13.2, 17.5, 21.4, 15.6],
            name: '华南',
            lineStyle: { color: '#00b894' },
            areaStyle: { color: 'rgba(0, 184, 148, 0.3)' }
          }
        ]
      }
    ]
  }
})

// 地区趋势图
const regionTrendOption = computed(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

  return {
    title: {
      text: '地区死亡率月度趋势',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['华北', '华东', '华南', '西南'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '死亡率 (‰)',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '华北',
        type: 'line',
        smooth: true,
        data: [10.2, 9.8, 9.1, 8.5, 8.2, 7.9, 7.6, 7.8, 8.4, 9.1, 9.6, 10.3],
        lineStyle: { color: '#ff7875', width: 3 }
      },
      {
        name: '华东',
        type: 'line',
        smooth: true,
        data: [7.8, 7.5, 7.0, 6.6, 6.4, 6.1, 5.8, 6.0, 6.5, 7.0, 7.4, 7.9],
        lineStyle: { color: '#74b9ff', width: 3 }
      },
      {
        name: '华南',
        type: 'line',
        smooth: true,
        data: [6.9, 6.6, 6.2, 5.8, 5.6, 5.3, 5.0, 5.2, 5.7, 6.2, 6.6, 7.0],
        lineStyle: { color: '#00b894', width: 3 }
      },
      {
        name: '西南',
        type: 'line',
        smooth: true,
        data: [8.5, 8.2, 7.8, 7.4, 7.2, 6.9, 6.6, 6.8, 7.3, 7.8, 8.2, 8.6],
        lineStyle: { color: '#fdcb6e', width: 3 }
      }
    ]
  }
})

// 表格数据
const regionColumns = [
  { title: '排名', dataIndex: 'rank', key: 'rank', width: 60 },
  { title: '地区', dataIndex: 'region', key: 'region', width: 100 },
  { title: '死亡率(‰)', dataIndex: 'rate', key: 'rate', width: 100, sorter: (a, b) => a.rate - b.rate },
  { title: '死亡人数', dataIndex: 'count', key: 'count', width: 100 },
  { title: '城市(‰)', dataIndex: 'urban', key: 'urban', width: 80 },
  { title: '农村(‰)', dataIndex: 'rural', key: 'rural', width: 80 },
  { title: '同比变化', dataIndex: 'change', key: 'change', width: 100 },
  { title: '风险等级', dataIndex: 'risk', key: 'risk', width: 100 }
]

const regionTableData = ref([
  { key: 1, rank: 1, region: '东北地区', rate: 9.3, count: 156800, urban: 8.5, rural: 10.1, change: '+0.8%', risk: '高风险' },
  { key: 2, rank: 2, region: '华北地区', rate: 9.1, count: 248900, urban: 8.2, rural: 10.0, change: '+0.5%', risk: '高风险' },
  { key: 3, rank: 3, region: '西北地区', rate: 8.5, count: 89200, urban: 7.8, rural: 9.2, change: '+0.3%', risk: '中高风险' },
  { key: 4, rank: 4, region: '华中地区', rate: 8.1, count: 189400, urban: 7.6, rural: 8.6, change: '+0.2%', risk: '中风险' },
  { key: 5, rank: 5, region: '西南地区', rate: 8.0, count: 167300, urban: 7.5, rural: 8.5, change: '+0.1%', risk: '中风险' },
  { key: 6, rank: 6, region: '华东地区', rate: 7.1, count: 298500, urban: 6.8, rural: 7.4, change: '-0.2%', risk: '低风险' },
  { key: 7, rank: 7, region: '华南地区', rate: 6.7, count: 145600, urban: 6.1, rural: 7.3, change: '-0.5%', risk: '低风险' }
])

// 导出数据
const exportData = () => {
  message.success('数据导出成功')
}

// 刷新数据
const refreshData = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    message.success('数据刷新完成')
  }, 1500)
}

onMounted(() => {
  loading.value = false
})
</script>

<style scoped>
.statistics-page {
  padding: 24px;
  min-height: 100vh;
}

.page-breadcrumb {
  margin-bottom: 16px;
}

.page-breadcrumb :deep(.ant-breadcrumb-link) {
  color: #d4990a;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 32px;
}

.header-content {
  margin-bottom: 16px;
}

.ancient-title {
  font-size: 32px;
  font-weight: bold;
  color: #d4990a;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'STKaiti', 'KaiTi', serif;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  color: #8fa4b8;
  font-family: 'STKaiti', 'KaiTi', serif;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.decoration-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4990a, transparent);
}

.decoration-symbol {
  color: #d4990a;
  font-size: 20px;
}

.stats-section {
  margin-bottom: 32px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 32px;
  opacity: 0.8;
}

.highest-stat .stat-icon {
  color: #ff4d4f;
}
.lowest-stat .stat-icon {
  color: #52c41a;
}
.variation-stat .stat-icon {
  color: #faad14;
}
.urbanrural-stat .stat-icon {
  color: #1890ff;
}

.stat-content {
  text-align: left;
}

.stat-title {
  font-size: 14px;
  color: #b3c5d1;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: #8fa4b8;
}

.main-content {
  margin-top: 32px;
}

.chart-card :deep(.ant-card-head),
.table-card :deep(.ant-card-head),
.analysis-card :deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.chart-card :deep(.ant-card-head-title),
.table-card :deep(.ant-card-head-title),
.analysis-card :deep(.ant-card-head-title) {
  color: #d4990a;
  font-weight: 600;
}

.chart-card :deep(.ant-card-body),
.table-card :deep(.ant-card-body),
.analysis-card :deep(.ant-card-body) {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 0 0 8px 8px;
}

.chart-container {
  width: 100%;
  min-height: 400px;
  position: relative;
}

.chart-container > div {
  width: 100% !important;
  height: 100% !important;
}

.analysis-content {
  color: #fff;
}

.analysis-section {
  margin-bottom: 24px;
}

.analysis-section h4 {
  color: #d4990a;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}

.factor-list {
  space-y: 12px;
}

.factor-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.factor-name {
  color: #b3c5d1;
  font-size: 14px;
  width: 90px;
}

.factor-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.factor-progress {
  height: 100%;
  background: linear-gradient(90deg, #d4990a, #f1c40f);
  transition: width 0.3s ease;
}

.factor-value {
  color: #d4990a;
  font-size: 12px;
  font-weight: 600;
  width: 40px;
  text-align: right;
}

.suggestion-list {
  list-style: none;
  padding: 0;
}

.suggestion-list li {
  padding: 8px 0;
  border-left: 3px solid #d4990a;
  padding-left: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #b3c5d1;
  font-size: 14px;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d4990a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(255, 255, 255, 0.1) !important;
}
</style>
